<template>
<div class="container__">
    <div v-if="flag">
        <div class="messageItem sys" v-for="(item, index) in systemlist" :key="index" @click="sysTo">
            <img src="/static/images/123456.png" alt="">
            <div class="namebox">
                <h3>{{item.name}}</h3>
                <span>{{item.des}}</span>
            </div>
            <div class="timebox">
                <!-- <span>{{item.time}}</span> -->
                <div class="redbox">
                    <div v-if="item.num!=0">{{item.num}}</div>
                </div>
            </div>

        </div>
        <div class="messageItem" v-for="(item, index) in messageItem" :key="index" @click="chatTo(item)">
            <img :src="item.user.avatar" alt="">
            <div class="namebox">
                <h3>{{item.user.nickname}}</h3>
                <span>{{item.content}}</span>
            </div>
            <div class="timebox">
                <span>{{item.created_at}}</span>
                <div class="redbox" v-if="item.nums">
                    <div>{{item.nums}}</div>
                </div>
                <div v-else>&nbsp;</div>
            </div>
        </div>  
    </div>
    <div v-if="flag==false" style="min-height:100vh;background:#f4f5f5;padding-top:20px;">
        <div  class="bg">
            <!-- <img src="/static/images/login_background@2x.png" alt="" class="bgcolor" mode="aspectFill"> -->
            <div class="bgcon">
                <img src="/static/images/logo@2x.png" alt="" class="logo">
                <div class="Jgname">拓师带</div>
                <div class="grayLIne"></div>
                <div class="desc">您还没登录，暂时收不到消息，请先登录</div>
                <div class="loginBtn">
                    
                    <button  type="" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
                        确认登录
                    </button> 
                </div>
            </div>
            
        </div>
        
         
    </div>

</div>
</template>

<script>
// import { formatTime } from '@/utils/index'
import {getlist} from '@/api/msg'
import {getnums} from '@/api/msg'
import { xdLogin } from "@/utils/login"
export default {
    data() {
        return {
            value: '',
            systemlist: [{
                name: '系统消息',
                // url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2363037083,4182949652&fm=27&gp=0.jpg',
                // time: '14:39',
                num: '0',
                des: '未读消息',
            }, ],
            messageItem: [],
            flag:false
        }
    },
    methods: {
        bindGetUserInfo(e){
            xdLogin(e).then((res)=>{
                this.flag=true
                this.getlist()
                this.getnums()
            })
        },
        Onchange(e) {
            this.value = e.mp.dedetail
        },
        sysTo() {
            wx.navigateTo({
                url: '/pages/sysinfo/main'
            })
        },
        chatTo(item) {
            wx.navigateTo({
                url: '/pages/chatOnLine/main?info=' + JSON.stringify(item.user)
            })
        },
        getlist(){
            getlist().then(res=>{
                if(res.code==200){
                    if(res.data.data){
                        this.messageItem=res.data.data   
                    }
                }
            })
        },
        getnums(){
            getnums().then(res=>{
                this.systemlist[0].num=res.data
                this.systemlist[0].des='您有'+res.data+'条未读消息'
            })
        }
        // send() {
        //     let a =JSON.stringify({uid:1,ruid:7,msg:'你是谁'})
        //      wx.sendSocketMessage({ data: a})
        // }

    },
    onShow() {
        Object.assign(this.$data, this.$options.data())
        wx.getStorageSync("token")?this.flag=true:this.flag=false;
        if(this.flag){
           this.getlist()
           this.getnums()
        }else{
            
        }
        
    }

}
</script>

<style lang="scss">
.container__ {
    font-size: 14px;

    .van-search {
        padding: 10px 15px;

        .fieldclass {
            height: 32px;
            box-sizing: border-box;

            .field-index--van-field {
                padding: 0;
            }
        }

    }

    .sys {
        border: 0 !important;
    }

    .messageItem {
        height: 90px;
        border-top: 1px solid #DDDDDD;
        box-sizing: border-box;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
        }

        .namebox {
            // width: 220px;
            margin-left: 15px;
            flex:1;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
        }

        .namebox span {
            overflow: hidden;
            max-height: 22px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .timebox {
            // width: 63px;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: flex-end;

            span {
                text-align: right;
            }

            .redbox {
                div {
                    width: 20px;
                    height: 20px;
                    box-sizing: border-box;
                    background-color: red;
                    color: #fff;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 20px;
                    float: right;
                }
            }
        }

        div {

            span {
                color: #666666;
                //  font-size: 14px;
            }

            h3 {
                font-size: 15px;
                color: #333333;
                font-weight: bold;
            }
        }
    }

}
.loginBtn{
    width:209px;
    height:40px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    button{
        width:209px;
        height:40px;
        line-height:40px;
        background:rgba(26,132,251,1);
        border-radius:20px;
        font-size:14px;
        font-weight:500;
        color:rgba(255,255,255,1);
        text-align: center;
        &::before{
            border: none;
        }
        &::after{
            border: none;
        }
    }
}
.logo{
    width:70px;
    height:70px;
    background:rgba(247,247,247,1);
    border-radius:15px;
    margin: 0 auto;
    margin-top: 90px;
    display: block;
}
.Jgname{
    margin-top: 15px;
    font-size:18px;
    font-weight:bold;
    color:rgba(51,51,51,1);
    text-align: center;
}
.grayLIne{
    width:276px;
    height:1px;
    background:rgba(221,221,221,1);
    margin: 0 auto;
    margin-top:28px;
}
.desc{
    margin-top: 20px;
    font-size:14px;
    font-weight:500;
    color:rgba(51,51,51,1);
    text-align: center;
}
.bg{
    width:305px;
    height:484px;
    position: relative;
    margin: auto;
    .bgcolor{
        width:305px;
        height:484px;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: 1;
    }
    .bgcon{
        width:305px;
        height:484px;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: 2;
    }
}
</style>
